<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <script>

        function myForEach(arr , cb) {
            for(var i = 0 ; i < arr.length ; i++) {
                cb(arr[i] , i) ;
            }
        }



        var res = 0 ;
        // myForEach相当于调用了三次函数，每个函数中，i都是形参(形参本质也是局部变量)，局部变量只在函数内部生效，因此i得以保存--不受异步的影响
        myForEach([1,2,3] , function(v , i) {
            res += v ;
            setTimeout(function() {
                console.log(i);
            } , 0)
        })
        console.log(res);



        // var cb = function(v , i) {
        //     res += v ;
        //     setTimeout(function() {
        //         console.log(i);
        //     } , 0)
        // }

        // cb(arr[0] , 0) ;


        // var cb = function(v , i) {
        //     res += v ;
        //     setTimeout(function() {
        //         console.log(i);
        //     } , 0)
        // }

        // cb(arr[1] , 1) ;


        // var cb = function(v , i) {
        //     res += v ;
        //     setTimeout(function() {
        //         console.log(i);
        //     } , 0)
        // }

        // cb(arr[2] , 2) ;



        for(var i = 0 ; i < 10 ; i++) {
            fn(i) ;
        }



        function fn(i) {
            setTimeout(function(){
                console.log(i);
            } , 1000)
        }

    </script>
    
</body>
</html>